<template>
  <div id="login" v-loading="loading">
    <div class="loginBox">
      <svg-icon class="loginIcon" icon-class="loginsvg"></svg-icon>
      <!-- <div class="title">熊先森后台管理系统</div> -->
      <div class="userNameBox">
        <el-input
          type="text"
          prefix-icon="el-icon-user-solid"
          class="userName"
          placeholder="请输入您的账号"
          v-model="userInfos.userNmae"
        ></el-input>
      </div>
      <div class="passWordBox">
        <el-input
          type="password"
          prefix-icon="el-icon-lock"
          class="passWord"
          placeholder="请输入您的密码"
          v-model="userInfos.passWord"
        ></el-input>
      </div>
      <div class="loginBtn">
        <el-button class="elBtn" type="primary" @click="toLogin">登录</el-button>
      </div>
      <!-- <div class="forGot"></div> -->
    </div>
  </div>
</template>

<script>
export default {
  name: "login",
  data() {
    return {
      userInfos: {
        userNmae: "",
        passWord: ""
      },
      loading: false
    };
  },
  methods: {
    toLogin() {
      this.loading = true;
      var time = Math.random() * 1000;
      console.log(time);
      setTimeout(() => {
        if (this.userInfos.userNmae !== "admin") {
          this.$alert("账号不存在！", "提示", {
            confirmButtonText: "确定",
            type: "error",
            callback: action => {}
          });
          this.loading = false;
        } else if (this.userInfos.passWord !== "123456") {
          this.$alert("密码输入错误！", "提示", {
            confirmButtonText: "确定",
            type: "error",
            callback: action => {}
          });
          this.loading = false;
        } else {
          this.$message({
            showClose: true,
            message: "登录成功！",
            type: "success"
          });
          // this.$store.commit("isLoading", true);
          // localStorage.setItem("isLoading", true);
          this.$router.push("/container");
          this.loading = false;
        }
      }, time);
    }
  }
};
</script>

<style lang="scss" scoped>
#login {
  position: fixed;
  width: 100%;
  height: 100%;
  background: url(../../assets/images/loginBg.jpg) repeat;
  background-size: 100% 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  .loginBox {
    text-align: center;
    width: 400px;
    height: 300px;
    background-color: hsla(199, 78%, 55%, 0.068);
    border-radius: 20px;
    .loginIcon {
      margin-top: 30px;
      margin-bottom: 30px;
      width: 100px;
      height: 45px;
    }
    .title {
      text-align: center;
      font-size: 20px;
      margin-top: 10px;
      margin-bottom: 40px;
      -moz-user-select: none; /*火狐*/
      -webkit-user-select: none; /*webkit浏览器*/
      -ms-user-select: none; /*IE10*/
      -khtml-user-select: none; /*早期浏览器*/
      user-select: none;
    }
    .userNameBox {
      position: relative;
      text-align: center;
      margin-bottom: 20px;
      .usernameIcon {
        position: absolute;
        left: 84px;
        top: 50%;
        transform: translateY(-50%);
        z-index: 999;
      }
      .userName {
        // background-color: rgba(255, 255, 255, 0.418)!important;
        width: 250px;
      }
    }
    .passWordBox {
      position: relative;
      text-align: center;
      margin-bottom: 20px;
      .passwordIcon {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        left: 84px;
        z-index: 999;
      }
      .passWord {
        width: 250px;
      }
    }
    .loginBtn {
      text-align: center;
      .elBtn {
        width: 250px;
      }
    }
  }
}
.userName >>> .el-input__inner {
  background-color: rgba(255, 255, 255, 0.018);
  color: #ffffff;
  //    border: 1px solid #dcdfe62e;
}
.passWord >>> .el-input__inner {
  background-color: rgba(255, 255, 255, 0.018);
  color: #ffffff;
  //   border: 1px solid #dcdfe62e;
}
</style>
